<template>
	<view>
		<view class="activity" v-for="item in actList" @click="toDetailPage(item)">
			<view class="head">
				<image class="img" mode="scaleToFill" :src="item.img" @error="imageError"></image>
			</view>
			<view class="content">
				<view class="content-head">
					<text class="title">{{item.title}}</text>
					<text v-if="item.state===0" class="title-start">进行中</text>
					<text v-else class="title-end">已结束</text>
				</view>
				<text class="address">地点：{{item.address}}</text>
				<text class="deadline">截止时间：{{item.deadline}}</text>
				<view class="bottom">
					<text class="bottom-text-1">¥{{item.price}}</text>
					<text class="bottom-text-2">{{item.appNumber}}人已参加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actList: [{ 
					title: "以球会友|精彩羽共友谊赛",
					address: "地址1",
					deadline: "2023-08-31 15:00:00",
					img: "/static/ac01.jpg",
					totalNumber: 30,
					appNumber: 15,
					state: 0,
					isFree: true,
					price: "0.00",
				}, {
					title: "羽你同行|羽毛球小组赛",
					address: "地址2",
					deadline: "2023-08-31 15:00:00",
					img: "/static/ac04.jpg",
					totalNumber: 10,
					state: 1,
					appNumber: 8,
					isFree: true,
					price: "30.00",
				}, {
					title: "麻瓜羽毛球馆招生",
					address: "地址2",
					deadline: "2023-08-31 15:00:00",
					img: "/static/ac02.jpg",
					totalNumber: 10,
					state: 1,
					appNumber: 8,
					isFree: true,
					price: "30.00",
				}, {
					title: "会员充值大优惠",
					address: "地址2",
					deadline: "2023-08-31 15:00:00",
					img: "/static/ac03.jpg",
					totalNumber: 10,
					state: 1,
					appNumber: 8,
					isFree: true,
					price: "30.00",
				}]
			}
		},
		onLoad() {

		},
		methods: {
			toDetailPage(item) {
				uni.navigateTo({
					url: '/pages/act/detail/index?id=1'
				});
			},
		}
	}
</script>

<style lang="scss">
	.free-tag {
		background-color: #16d80f;
		text-align: center;
		// border-radius: 10rpx;
		color: white;
		font-size: 8rpx;
		width: 60rpx;
	}

	.activity {
		display: flex;
		flex-direction: row;
		background-color: white;
		align-items: center;
		margin-top: 20rpx;
		height: 230rpx;
		.head {
			width: 240rpx;
			padding: 20rpx;
			
			.img {
				width: 240rpx;
				height: 190rpx;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			height: 100%;
			.content-head {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-top: 10rpx;
				.title {
					font-size: 35rpx;
					color: #5f5f5f;
					font-weight: 600;
					width: 300rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}

				.title-start {
					border-radius: 2px;
					color: #1ebd0f;
					font-weight: bold;
					width: 55px;
					font-size: 14px;
					text-align: center;
					margin-right: 10px;
					background-color: #f5f5f5;
				
				}
				
				.title-end {
					color: #666666;
					border-radius: 2px;
					width: 55px;
					font-size: 14px;
					text-align: center;
					margin-right: 10px;
					background-color: #f5f5f5;
				}
			}

			.address {
				width: 450rpx;
				font-size: 26rpx;
				padding-top: 10rpx;
				font-weight: 450;
				color: #b3b3b3;
			}

			.deadline {
				width: 450rpx;
				font-weight: 450;
				font-size: 26rpx;
				padding-top: 8rpx;
				color: #b3b3b3;
			}

			.bottom {
				display: flex;
				flex-direction: row;
				padding-top: 10rpx;
				padding-bottom: 6rpx;
				justify-content: space-between;
				.bottom-text-1 {
					color: #b3b3b3;
					font-weight: 550;
					font-size: 30rpx;
				}

				.bottom-text-2 {
					color: #b3b3b3;
					font-size: 26rpx;
				}
			}
		}
	}
</style>